<template>
  <div class="job-management-container">
    <!-- 顶部导航栏 - 这部分数据模型中没有，使用死数据 -->
    <div class="top-bar">
      <div class="logo">企业版</div>
      <div class="user-nav">
        <div class="user-name">王先生</div>
        <div class="nav-items">
          <div class="nav-item active">发布职位</div>
          <div class="nav-item" @click="goToJobspoing">职位管理</div>
          <div class="nav-item" @click="goToRecommend">推荐个人</div>
          <div class="nav-item">搜索个人</div>
          <div class="nav-item" @click="goToMessages">消息</div>
          <div class="nav-item">我的资料</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <div class="job-management-header">
        <h3>职位管理</h3>
        <button class="publish-btn" @click="showAddDialog = true">+ 发布职位</button>
      </div>

      <!-- 职位列表 -->
      <div class="job-list">
        <div class="job-item" v-for="job in jobList" :key="job.id">
          <div class="job-title">
            {{ job.title }} <span class="job-tag">回</span>
          </div>
          <div class="job-details">
            {{ job.city.name }} | {{ getWorkingExperience(job.working) }} | {{ job.education }} | {{ job.money }}
          </div>
          <div class="job-stats">
            {{ job.browse_number }} 人查看我的职位 > {{ job.deliver_number }} 人沟通过 > {{
              formatDate(job.created_at)
            }}
          </div>
          <div class="job-actions">
            <button class="action-btn share">分享</button>
            <button class="action-btn edit" @click="editJob(job)">编辑</button>
            <button class="action-btn toggle">{{ job.status === 1 ? '关闭' : '打开' }}</button>
            <button class="action-btn delete" @click="deleteJob(job.id)">删除</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 账号权益区域 - 这部分数据模型中没有，使用死数据 -->
    <div class="account-benefits">
      <div class="benefits-title">账号权益</div>
      <div class="status-filter">
        <select>
          <option>全部状态</option>
          <option>已发布</option>
          <option>已关闭</option>
        </select>
      </div>
    </div>

    <!-- 添加职位对话框 -->
    <div class="dialog-overlay" v-if="showAddDialog" @click.self="showAddDialog = false">
      <div class="job-dialog">
        <h3>发布新职位</h3>
        <form @submit.prevent="submitJob">
          <div class="form-group">
            <label>职位名称</label>
            <input type="text" v-model="newJob.title" required>
          </div>
          <div class="form-group">
            <label>薪资范围</label>
            <input type="text" v-model="newJob.money" placeholder="例如: 5-10K" required>
          </div>
          <div class="form-group">
            <label>工作类型</label>
            <select v-model="newJob.type">
              <option value="0">不限</option>
              <option value="1">兼职</option>
              <option value="2">全职</option>
            </select>
          </div>
          <div class="form-group">
            <label>工作经验</label>
            <select v-model="newJob.working">
              <option value="0">经验不限</option>
              <option value="1">在校生</option>
              <option value="2">应届生</option>
              <option value="3">1-3年</option>
              <option value="4">3-5年</option>
              <option value="5">5年以上</option>
            </select>
          </div>
          <div class="form-group">
            <label>学历要求</label>
            <input type="text" v-model="newJob.education" placeholder="例如: 大专">
          </div>
          <div class="form-group">
            <label>工作城市</label>
            <select v-model="newJob.city">
              <option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>职位描述</label>
            <textarea v-model="newJob.description"></textarea>
          </div>
          <div class="form-actions">
            <button type="button" @click="showAddDialog = false">取消</button>
            <button type="submit">发布</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
import axios from 'axios'

export default {
  setup() {
    const jobList = ref([])
    const showAddDialog = ref(false)
    const hrInfo = ref(null)
    const companyInfo = ref(null)

    // 新职位数据 - 全部来自模型字段
    const newJob = ref({
      title: '',
      money: '',
      type: 0,
      working: 0,
      education: '不限',
      city: '',
      description: '暂无',
      hr: '',
      company: '',
      jobcate: '',
      browse_number: 0,
      collect_number: 0,
      deliver_number: 0
    })

    // 获取HR信息
    // const fetchHrInfo = async (userId) => {
    //   try {
    //     const response = await axios.get('http://127.0.0.1:8000/hr/hrinfo/', {
    //       params: {user: userId}
    //     })
    //     hrInfo.value = response.data.data.hr
    //     companyInfo.value = response.data.data.company
    //     newJob.value.hr = hrInfo.value.id
    //     newJob.value.company = companyInfo.value.id
    //   } catch (error) {
    //     console.error('获取HR信息失败:', error)
    //   }
    // }

    // 获取职位列表
    const fetchJobs = async (hrId) => {
      try {
        const response = await axios.get('http://127.0.0.1:8000/hr/joblist/', {
          params: {hr: hrId}
        })
        jobList.value = response.data.data
      } catch (error) {
        console.error('获取职位列表失败:', error)
      }
    }

    // 工作经验映射
    const getWorkingExperience = (value) => {
      const map = {
        0: '经验不限',
        1: '在校生',
        2: '应届生',
        3: '1-3年',
        4: '3-5年',
        5: '5年以上'
      }
      return map[value] || '经验不限'
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    }

    // 发布新职位
    const submitJob = async () => {
      try {
        const response = await axios.post('/api/job-posting/', newJob.value)
        jobList.value.unshift(response.data.data)
        showAddDialog.value = false
        resetNewJob()
      } catch (error) {
        console.error('发布职位失败:', error)
      }
    }

    // 重置新职位表单
    const resetNewJob = () => {
      newJob.value = {
        title: '',
        money: '',
        type: 0,
        working: 0,
        education: '不限',
        city: '',
        description: '暂无',
        hr: hrInfo.value.id,
        company: companyInfo.value.id,
        jobcate: '',
        browse_number: 0,
        collect_number: 0,
        deliver_number: 0
      }
    }

    // 初始化数据
    onMounted(() => {
      // 假设从本地存储获取用户ID
      let userId = localStorage.getItem('userid')
      if (userId && typeof userId === 'string') {
        userId = userId.split(':')[0]
      }
      console.log('用户ID:', userId)
      if (userId) {
        // fetchHrInfo(userId) // 注释掉这行
        // 直接获取职位列表（如果hrId就是userId）
        fetchJobs(userId)
      }
    })

    return {
      jobList,
      showAddDialog,
      newJob,
      getWorkingExperience,
      formatDate,
      submitJob
    }
  },
  methods: {
    goToMessages() {
      this.$router.push('/hrMessage');
    },
    goToRecommend(){
      this.$router.push('/recommend');
    },
    goToJobspoing(){
      this.$router.push('/AIRecruit');
    }
  }
}
</script>

<style scoped>
/* 样式部分与图片保持一致 */

.job-management-container {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}

.user-nav {
  display: flex;
  align-items: center;
}

.user-name {
  margin-right: 30px;
  font-weight: bold;
}

.nav-items {
  display: flex;
}

.nav-item {
  margin: 0 15px;
  cursor: pointer;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.nav-item.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

.main-content {
  margin-top: 20px;
}

.job-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.publish-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.publish-btn:hover {
  background-color: #40a9ff;
}

.job-list {
  margin-top: 20px;
}

.job-item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  transition: box-shadow 0.3s ease;
}

.job-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.job-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.job-tag {
  color: #1890ff;
  margin-left: 5px;
}

.job-details {
  color: #666;
  margin-bottom: 8px;
}

.job-stats {
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
}

.job-actions {
  position: absolute;
  right: 15px;
  top: 15px;
}

.action-btn {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.action-btn.share {
  color: #1890ff;
  border-color: #1890ff;
}

.action-btn.edit {
  color: #666;
}

.action-btn.toggle {
  color: #52c41a;
  border-color: #52c41a;
}

.action-btn.delete {
  color: #f5222d;
  border-color: #f5222d;
}

.account-benefits {
  margin-top: 30px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.benefits-title {
  font-weight: bold;
  color: #333;
}

.status-filter select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.job-dialog {
  background: white;
  padding: 20px;
  border-radius: 4px;
  width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.job-dialog h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #1890ff;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #1890ff;
  outline: none;
}

.form-group textarea {
  height: 100px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.form-actions button {
  margin-left: 10px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-actions button:first-child {
  background: white;
  border: 1px solid #ddd;
  color: #333;
}

.form-actions button:first-child:hover {
  background: #f5f5f5;
}

.form-actions button:last-child {
  background: #1890ff;
  color: white;
  border: none;
}

.form-actions button:last-child:hover {
  background: #40a9ff;
}
</style>